<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的个人空间 - QQ空间风格</title>
<!--　　 外部资源 -->
<　script src="https://cdn.tailwindcss.com"><　/script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="/Assets/css/tailwind.css">
<link rel="stylesheet" href="/Assets/css/style.css">
</head>
<body class="bg-slate-100 text-slate-800 min-h-screen">
<!--　　 顶部导航 -->
<header id="header" class="bg-blue-600 text-white py-3 shadow-md">
<div class="container mx-auto px-4 flex justify-between items-center">
<h1 class="text-xl font-bold">我的QQ空间</h1>
<div class="flex gap-3">
<button class="hover:text-gray-200"><<i class="fa fa-home"></</i> 首页</button>
<button class="hover:text-gray-200"><<i class="fa fa-bell"></</i> 通知</button>
<button class="hover:text-gray-200"><<i class="fa fa-user"></</i> 我的</button>
</div>
</div>
</header>

<!--　　 主内容区域 -->
<main class="container mx-auto p-4 py-6">
<div class="flex flex-col lg:flex-row gap-6">
<!--　　 左侧边栏（个人信息） -->
<aside id="sidebar-left" class="lg:w-64 shrink-0 bg-white rounded-lg shadow-md p-4">
<div class="text-center mb-4">
<div class="w-20 h-20 rounded-full bg-blue-200 mx-auto flex items-center justify-center text-blue-600 text-2xl">
<<i class="fa fa-user"></</i>
</div>
<h3 class="mt-2 font-semibold">我的昵称</h3>
<p class="text-sm text-gray-500">今天也要开心呀~</p>
</div>
<div class="space-y-2">
<a href="#" class="flex items-center gap-2 p-2 hover:bg-gray-100 rounded">
<<i class="fa fa-picture-o"></</i> 相册
</a>
<a href="#" class="flex items-center gap-2 p-2 hover:bg-gray-100 rounded">
<<i class="fa fa-book"></</i> 日志
</a>
<a href="#" class="flex items-center gap-2 p-2 hover:bg-gray-100 rounded">
<<i class="fa fa-star"></</i> 留言板
</a>
</div>
</aside>

<!--　　 中间内容区（动态+内容） -->
<div class="flex-1">
<!--　　 关于项目板块 -->
<section class="bg-white rounded-lg shadow-md p-6 mb-6">
<h2 class="text-xl font-semibold mb-4 text-gray-800">关于这个空间</h2>
<p class="text-gray-600">这是我用HTML+Tailwind CSS搭建的QQ空间风格页面，后续会添加相册、日志等功能~</p>
</section>

<!--　　 数据统计模块 -->
<div class="flex gap-6 p-4 bg-gray-50 rounded shadow-sm mt-4">
<div class="text-center">
<p class="text-gray-500">访客</p>
<p class="text-xl font-bold">215</p>
</div>
<div class="text-center">
<p class="text-gray-500">点赞</p>
<p class="text-xl font-bold">36</p>
</div>
<div class="text-center">
<p class="text-gray-500">评论</p>
<p class="text-xl font-bold">8</p>
</div>
</div><!--　　 动态发布板块 -->
<section class="bg-white rounded-lg shadow-md p-6">
<h2 class="text-xl font-semibold mb-4 text-gray-800">我的动态</h2>
<!--　　 发布框 -->
<div id="post-box" class="border border-gray-200 rounded p-4 mb-4">
<textarea class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="分享你的新鲜事..."></textarea>
<div class="flex justify-between items-center mt-2">
<div class="flex gap-2">
<button class="text-gray-500 hover:text-blue-500"><<i class="fa fa-image"></</i></button>
<button class="text-gray-500 hover:text-blue-500"><<i class="fa fa-smile-o"></</i></button>
</div>
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">发布</button>
</div>
</div>
<!--　　 动态列表 -->
<div class="bg-gray-50 p-4 rounded text-center">
<p class="text-gray-500">暂无动态，快来发布第一条吧！</p>
</div>
</section>
</div>
</div>
<!--　　 相册板块 -->
<section class="mt-8 p-4">
<h2 class="text-2xl font-bold mb-4">我的相册</h2>
<div class="grid grid-cols-3 gap-4">
<div class="border rounded p-2 bg-white shadow-sm">
<img src="https://picsum.photos/200/200?random=1" alt="照片1" class="w-full">
</div>
<div class="border rounded p-2 bg-white shadow-sm">
<img src="https://picsum.photos/200/200?random=2" alt="照片2" class="w-full">
</div>
<div class="border rounded p-2 bg-white shadow-sm">
<img src="https://picsum.photos/200/200?random=3" alt="照片3" class="w-full">
</div>
</div>
</section>
收起
</main>
</body>
</html>